Dreamweaver MX 2004 Tutorial

COMM/CISS 271

Advanced Web Design

Fall 2008 – Class Session #3

Instructor: C. M. Sturgeon
 Page |2

Table of Contents
Introduction to DHTML ................................................................................................................................. 2
DHTML Menus in Dreamweaver ................................................................................................................... 2
DHTML Work Files..................................................................................................................................... 2
File organizing ............................................................................................................................................... 3
Creating the Drop Downs.............................................................................................................................. 3
Your Code ...................................................................................................................................................... 4
JavaScript Behaviors ..................................................................................................................................... 6

Introduction to DHTML
DHTML has been around for many years and used in a variety of manners in successful
organization sites. Dreamweaver, being the powerful web page tool that it is, offers a
number of “pre-make” options. Here we will use some of those tools to make a dropdown
menu within a given site.
Dreamweaver does contain sophisticated functions used to create professional quality web
sites. Because of this, it is one of the most popular web authoring tools among web
designers.

This handout is to help everyone on each team understand the steps and have a references
in order to be empowered for designing within whatever site you are working. The handout
is divided into several sections with a header dividing them.

DHTML Menus in Dreamweaver

There are several different ways a DHTML Drop Down Menus can be deployed. Some
scripts create the submenus on-the-fly i.e. the submenus are not present on the page as
HTML elements but are usually written by "document.write" statements. Since search
engines cannot read javascripts, such submenus are not “spidered” by search engines and
screen readers. The solution is to build your own DHTML Menus making sure that the
submenus are proper HTML elements within your document and they are only shown and
hidden by main menu triggers. Dreamweaver MX 2004 provides us with the necessary
tools to build such menus.

DHTML Work Files

To start the tutorial, download the PopEm.zip file from ANGEL under “Assignments” -
which contains files needed for completing this tutorial. For learning purposes, it is the
philosophy of this teacher “Sturgeon” – to require each individual to work through the
 Page |3

tutorial, and then have the team to work together to place a completed, functioning site
with DHTML, on the web as a way to demonstrate understanding and competency.

File organizing

 Create a new folder in your already “defined” site PopEm

 Unzip the PopEm.zip archive and place its contents in the PopEm folder you created
in the previous step
 Open the file popem.htm

Creating the Drop Downs

The first step is to open the popem.htm file. The file popem.htm is a basic HTML document
with the following divs: (if you are not sure what a div is yet, you may ask a team member –
this will be covered when we get into the CSS components and XHTML of designing.

 #header
 #menu
 #content
 #footer

The div #menu consists of three buttons. In this tutorial we will create a drop down for
Button 2. Switch to code or split view and position your cursor at the end of menu #div and
start of #content div. Insert a layer as shown below.

Switch back to design view.Open the Layers Panel (F2) and change the name of the layer from
"Layer1" to "SubMenu2" as shown below. With the layer selected, modify the Left(L), Top(T)
and Width(W) as shown below. Make sure H is empty.
 Page |4

Inside the newly created Layer type out your submenu links as shown below. Make sure
that there are no separating <br> tags between the submenu links.

Your Code

Your code should look like this:

<div id="SubMenu2" style="position:absolute; width:200px; z-index:2; left:

120px; top: 100px; visibility: hidden;" class="subs">
<a href="#">Sub Menu Link 1Sub Menu Link 2 Sub Menu Link 3Sub Menu Link 4Sub
Menu Link 5
</div>

In the assets folder there is a CSS file entitled “stylesraw.css” ; open the css file stylesraw.css
and add the following code:

.subs {
font-size: 80%;
background-color: #454578;
border-right-width: 1px;
border-bottom-width: 1px;
 Page |5

border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.subs a {
color: #FFFFFF;
text-decoration: none;
display: block;
width: 190px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 10px;
}

We are using a defined class subs so that additional submenu layers can share the same class.
Save and css file and close it.

Select the div #SubMenu2 in your Dreamweaver status bar and set its class to subs as shown
above. Switchback to code view and position your cursor just before </body> and insert another
layer. Change its name to closer and drag it below SubMenu2 in your layers panel and change its
properties as shown below.
 Page |6

The closer layer will hide the submenu onMouseOver. Insert a transparent 1x1 px shim image
and resize it as shown below.

JavaScript Behaviors

Select the image button2.gif and insert a null link by typing "javascript:;" as shown below.

Open the Behaviors Panel (Shift + F4). Click the + Button and Choose "Show_Hide Layers"
Behavior.
 Page |7

Select each layer and click "Show" Button.

Make sure onMouseOver is selected as the event.

Select the transparent image within the closer layer and create a null link.

Apply the Show-Hide Behavior to this layer this time selecting hide as shown below.

Make sure onMouseOver event is selected.

Similarly Convert Buttons 1 and 2 into null links and Apply Show-Hide Layer to Button 1
 Page |8

and Button 2, selecting to hide the layers onMouseOver.

Hide the two layers by clicking below the eye icon, till you see a closed eye as shown below.
This changes the visibility of the layers to hidden.

Your Drop Down Menu is now ready and you can test it on your browser (F12).

Notes :
1. You could add the hide layer behavior to the div #header. To do so make sure Events for
version 5 browser is selected. This will activate Show-Hide Layer to be applied directly to
the header div.